<template>
	<view class="container-white">
		<view class="head flex-box" v-if="topic.quesType > 0">
			<view style="padding: 10upx 0;">
				<text v-if="topic.quesType == 1">单选题</text>
				<text v-else-if="topic.quesType == 2">多选题</text>
				<text v-else>判断题</text>
			</view>
			<view>（{{ index }}/{{ total }}）</view>
		</view>

		<view class="topic-box">
			<rich-text v-if="topic.quesInfo != '该试题已删除'" :nodes="topic.quesInfo" class="questions"></rich-text>
			<view class="topic-box-delete" v-else>{{ topic.quesInfo }}</view>
			<view v-if="topic.info">{{ topic.info }}</view>
			<view class="answer">
				<view class="options" v-for="(item, index) in topic.optionsBeans" :key="index">
					<view v-if="topic.quesType == 3" class="stide" :class="item.checked ? (item.status ? 'correct' : 'mistake') : item.status ? 'correct' : ''">
						<image
							:src="item.checked ? (item.status ? '/static/icon/correct.png' : '/static/icon/error.png') : item.status ? '/static/icon/correct.png' : ''"
							style="width: 60upx;height: 60upx;"
						/>
					</view>
					<view v-else class="stide" :class="item.checked ? (item.status ? 'correct' : 'mistake') : item.status ? 'correct' : ''">
						<view v-if="!item.checked">{{ item.key }}</view>
						<image v-else :src="item.status ? '/static/icon/correct.png' : '/static/icon/error.png'" style="width: 60upx;height: 60upx;" />
					</view>
					<view style="flex:1">{{ item.option }}</view>
				</view>
			</view>
			<view style="margin-top: 20upx;" v-show="answRight != null">
				<view style="font-size:28upx;color: #999999;">矿校云提醒您</view>
				<view v-if="topic.quesType == 3" class="flex-box">
					<view style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{ answRight === 'A' ? '正确' : '错误' }}</text>
					</view>
					<view style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{ useransw === 'A' ? '正确' : useransw === 'B' ? '错误' : '未选择' }}</text>
					</view>
				</view>
				<view v-else class="flex-box">
					<view style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{ answRight }}</text>
					</view>
					<view style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{ useransw || '未选择' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { post_md5 } from '../../common/request';

export default {
	data() {
		return {
			topic: {},
			answ: [],
			answRight: '',
			useransw: '',
			total: 0,
			index: 0
		};
	},
	onLoad(options) {
		this.getTopic(options);
		this.total = options.total;
		this.index = Number(options.index) + 1;
	},
	methods: {
		getTopic(options) {
			const params = {
				userId: options.userId,
				quesId: options.quesId,
				examId: options.examId
			};
			post_md5('/exam-app/exam/analysis', params).then(res => {
				if (res.code == 500) {
					this.topic = {
						quesType: 0,
						quesInfo: '该试题已删除',
						optionsBeans: []
					};
					this.answRight = null;
				} else {
					this.topic = {
						quesType: res.data.quesType,
						quesInfo: res.data.quesInfo,
						optionsBeans: res.data.quesOptions
					};
					this.answRight = res.data.answRight;
					this.useransw = res.data.answ.split(',').join('') || '';
					// 删除空选项
					for (let i in this.topic.optionsBeans) {
						if (this.topic.optionsBeans[i].option == '') {
							this.topic.optionsBeans.splice(i, 1);
						}
					}
					this.topic.optionsBeans.forEach(x => {
						this.answRight.split('').forEach(y => {
							if (x.key === y) {
								x.status = true;
							}
						});
					});
				}
			});
		}
	}
};
</script>

<style>
.head {
	padding: 0 20upx;
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
}

.menu {
	display: flex;
	font-size: 22upx;
	font-weight: 400;
	color: #333333;
	padding: 10upx 100upx;
	margin: 1px 0;
	border-bottom: 1px solid #ededed;
	text-align: center;
}

.menu-icon {
	width: 42upx;
	height: 42upx;
}

.topic-box {
	padding: 20upx;
	font-size: 28upx;
	font-weight: normal;
	color: #333333;
	line-height: 60upx;
}

.mistake {
	background: #ec6663;
	border: 1px solid #ec6663;
	color: #ffffff;
}

.correct {
	background: #3ed325;
	color: #ffffff;
	border: 1px #3ed325 solid;
}
</style>
<style scoped>
.topic-box-delete {
	line-height: 300upx;
	text-align: center;
	color: #dee2ed;
	font-size: 18px;
}
</style>
